<template>
  <div class="otherbox" v-if="this.arr.length">
    <div class="othermenu">
      <p class="title">作者{{ userobj.username }}的其他菜谱</p>
      <div class="main">
        <template v-for="(item, index) in arr">
          <div
            :key="index"
            class="box"
            :data-cookid="item.cookid"
            v-if="index <= 8 && item.cookid != thiscookid"
          >
            <img :src="item.img" alt="" class="mimg" />
            <div class="fugai" @click="fto($event)"></div>
            <p class="itemtitle" @click="fto($event)">
              {{ item.title }}
            </p>
            <p class="user">
              <span class="username">{{ userobj.username }}</span>
              <span>{{ item["浏览次数"] }} 做过</span>
            </p>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userobj: {},
      arr: [],
    };
  },
  props: ["userid", "showOther", "dom", "thiscookid"],
  methods: {
    // 跳转至对应菜谱
    fto(e) {
      this.$router.push({
        path: `/menudetail/${e.target.parentNode.dataset.cookid}`,
      });
    },
  },
  mounted() {
    if (this.showOther) {
      this.$axios("/wxw/userinfo", { params: { userid: this.userid } }).then(
        (res) => {
          this.arr = res.data;
          this.userobj = res.data[0];
        }
      );
    }
  },
};
</script>

<style scoped lang="scss">
.otherbox {
  background: #eee;
}
.othermenu {
  margin: 70px auto 0;
  padding: 50px 0 40px;
  width: 1000px;
  .title {
    font-size: 24px;
    color: #c0ae7d;
    margin-bottom: 20px;
  }
  .main {
    display: flex;
    flex-wrap: wrap;
    .itemtitle {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      cursor: pointer;
      &:hover {
        color: red;
      }
    }
    .box {
      text-align: center;
      width: 230px;
      height: 260px;
      margin-right: 10px;
      margin-bottom: 15px;
      position: relative;
      background-color: #fff;
      &:hover .fugai {
        display: block;
      }
      .mimg {
        width: 230px;
        height: 180px;
        cursor: pointer;
      }
      .fugai {
        position: absolute;
        top: 0;
        left: 0;
        width: 230px;
        height: 180px;
        background-color: rgba(200, 200, 200, 0.3);
        display: none;
        cursor: pointer;
      }
      .itemtitle {
        display: block;
        font-size: 18px;
        margin: 15px 0 8px;
      }
      .user {
        color: #a5a7a6;
        font-size: 12px;
        .username {
          margin-right: 20px;
          cursor: pointer;
          &:hover {
            color: red;
          }
        }
      }
    }
  }
}
</style>